<template>
  <el-card>
    <el-checkbox :label="imgDetail.identifyId || imgDetail.applicationId">
      <!-- <img src=" https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="img"> -->
      <!-- <img :src="realSrc" class="img1"> -->
      <div
        class="img2"
        :style="{
          backgroundImage: 'url(' + realSrc + ')',
          backgroundSize: 'contain',
        }"
        @click="handleDetail"
      >
        <div
          v-if="false"
          class="status"
          :style="{
            '--color':
              imgDetail.status == '1'
                ? 'rgba(76, 122, 52, 0.996)'
                : imgDetail.status == '0'
                ? 'rgba(0, 164, 211, 0.996)'
                : imgDetail.status == '3'
                ? 'rgba(183, 15, 10, 0.996)'
                : '',
          }"
        >
          <!-- {{
            imgDetail.status == "1"
              ? "审核通过"
              : imgDetail.status == "0"
              ? "未审核"
              : "审核退回"
          }} -->
        </div>

        <dict-tag
          class="status_flow"
          :options="identityFlowStatusOptions"
          :value="imgDetail.status"
        />
      </div>

      <!-- 审核流程的字典 -->
      <!-- <el-tag
        effect="dark"
        class="iden-flow-status"
        size="mini"
        v-if="imgDetail.appliedRangeName"
      >
        {{ imgDetail.status }}
      </el-tag> -->

      <el-badge
        :value="imgDetail.thumbnailImg.length"
        class="badge_item"
        type="primary"
      >
      </el-badge>
    </el-checkbox>
    <div
      class="bottom"
      @mouseenter="
        hoverIdentifyId = imgDetail.identifyId || imgDetail.applicationId
      "
      @mouseleave="hoverIdentifyId = null"
    >
      <div class="bottom1">
        <span class="aa" v-if="false">
          <strong>一级类别：</strong> {{ imgDetail.appliedRangeName }}
        </span>

        <span class="aa">
          <strong>二级类别：</strong> {{ imgDetail.classifyName }}
        </span>
        <span class="aa">
          <strong>三级类别：</strong> {{ imgDetail.name }}
        </span>
      </div>
      <div><strong>标识位置：</strong> {{ imgDetail.location }}</div>
      <div><strong>录入人员：</strong> {{ imgDetail.createBy }}</div>
      <div>
        <strong>上传时间：</strong> {{ imgDetail.createTime }}
        <span style="float: right; cursor: pointer" @click="handleDetail"
          >查看详情>></span
        >
      </div>

      <el-row>
        <el-button
          size="mini"
          type="text"
          icon="el-icon-s-check"
          @click="handleShenhe"
          v-hasPermi="['identify:audit']"
          v-if="imgDetail.status == 0"
          >审核</el-button
        >

        <el-button
          size="mini"
          type="text"
          icon="el-icon-s-check"
          style="color: red"
          @click="handleChexiaoShenhe()"
          v-hasPermi="['identify:audit']"
          v-else
          >{{ imgDetail.status == 3 ? "撤销退回" : "撤销审核" }}</el-button
        >

        <el-button
          size="mini"
          type="text"
          icon="el-icon-edit"
          @click="handleUpdate"
          v-hasPermi="['identify:edit']"
          :disabled="imgDetail.status == 1"
          >修改</el-button
        >

        <el-button
          size="mini"
          type="text"
          icon="el-icon-delete"
          @click="handleDelete"
          v-hasPermi="['identify:remove']"
          >删除</el-button
        >

        <el-button
          size="mini"
          type="text"
          icon="el-icon-download"
          @click="handleDownSPD"
          v-hasPermi="['identify:remove']"
          v-if="shenpidan"
          >下载审批单</el-button
        >
      </el-row>
    </div>
  </el-card>
</template>

<script>
import { isExternal } from "@/utils/validate";
export default {
  props: {
    imgDetail: {
      typeof: Object,
      default: {},
    },
    identityFlowStatusOptions: {},
    shenpidan: {
      typeof: Boolean,
      default: false,
    },
  },
  data() {
    return {
      hoverIdentifyId: null,
    };
  },

  components: {},

  computed: {
    realSrc() {
      let real_src = this.imgDetail.thumbnailImg[0];

      if (isExternal(real_src)) {
        return real_src;
      }
      return real_src;
    },
  },

  mounted() {
    // this.getDicts("iden_flow_status").then((response) => {
    //   this.identityFlowStatusOptions = response.data;
    // });
  },

  watch: {
    value: {
      handler(val) {},
      deep: true,
      immediate: true,
    },
  },

  methods: {
    handleShenhe() {
      this.$emit("shenhe", this.imgDetail, "shenhe");
    },
    handleChexiaoShenhe() {
      this.$emit("chexiaoShenhe", this.imgDetail, "shenhe");
    },
    handleUpdate() {
      this.$emit("xiugai", this.imgDetail, "xiugai");
    },
    handleDelete() {
      this.$emit("shanchu", this.imgDetail);
    },
    handleDownSPD() {
      this.$emit("downSpd", this.imgDetail);
    },
    handleDetail() {
      this.$emit("xiangqing", this.imgDetail);
    },

    flowStatusFormat(row, column) {
      return this.selectDictLabel(this.identityFlowStatusOptions, row.status);
    },
  },
};
</script>

<style scoped lang="scss">
.el-card {
  width: 350px;
  height: 280px;
  ::v-deep .el-card__body {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    .el-checkbox {
      // height: 100%;
      // width: 100%;
      flex: 1;
      display: flex;
      .el-checkbox__input {
        position: absolute;
      }
      .el-checkbox__label {
        padding: 0;
        position: relative;
        // height: 100%;
        // width: 100%;
        flex: 1;
        display: flex;
        flex-direction: column;
      }
    }
    .bottom {
      font-size: 12px;
      margin: 4px 0 0 0;
      .bottom1 {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .aa {
          flex: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
}
.img1 {
  width: auto;
  height: auto;
  max-height: 100%;
  max-width: 100%;
  text-align: center;
}
.img2 {
  position: relative;
  // flex: 1;
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
  text-align: center;
  background-position: center;
  border: 1px dashed #ccc;
  overflow: hidden;
}
.badge_item {
  position: absolute;
  right: 0;
  top: 0;
  ::v-deep sup {
    top: 0;
  }
}
.appliedRangeName-bottom {
  position: absolute;
  bottom: 0;
}
.status {
  position: absolute;
  width: 100%;
  line-height: 30px;
  height: 30px;
  transform: rotate(-45deg) translate(-33%, -230%);
  text-align: center;
  top: 0;
  font-size: 14px;
  color: #fff;
  font-weight: bold;
  background-color: var(--color);
  opacity: 0.8;

  display: none;
}
.status_flow {
  position: absolute;

  line-height: 30px;
  height: 30px;
  transform: rotate(-45deg) translate(-33%, -230%);
  text-align: center;
  top: 0;
  font-size: 14px;
  color: #fff;
  font-weight: bold;
  background-color: var(--color);
  opacity: 0.8;

  // 添加流程后，不能斜的展示当前状态
  transform: none;
  right: 0;
  bottom: 0 !important;
  top: unset;
}
</style>
